<template>
    <div class="profile-container">
        <div class="profile-background">
            <div class="profile-header-bg"></div>
        </div>
        
        <el-card class="profile-card">
            <template v-if="loading">
                <div class="loading-container">
                    <el-skeleton :rows="4" animated />
                </div>
            </template>
            <template v-else>
                <div class="profile-header">
                    <div class="avatar-section">
                        <div class="avatar-wrapper" @click="handleAvatarClick">
                            <el-avatar 
                                :size="80" 
                                :src="getAvatarUrl()" 
                                class="profile-avatar" 
                            />
                            <div class="avatar-overlay">
                                <el-icon class="camera-icon"><Camera /></el-icon>
                            </div>
                        </div>
                        <div class="avatar-hint">点击更换头像</div>
                    </div>
                    
                    <div class="profile-info">
                        <h1 class="profile-username">{{ user.userName }}</h1>
                        <div class="profile-status">
                            <div class="status-indicator online"></div>
                            <span class="status-text">在线</span>
                        </div>
                        <div class="profile-role">
                            <div v-if="user.roles && user.roles.length > 0" class="roles-container">
                                <el-tooltip 
                                    v-if="sortRoles(user.roles).length > 2" 
                                    :content="getRoleDisplay(user.roles)" 
                                    placement="top"
                                    :show-after="200"
                                >
                                    <div class="role-tags-wrapper">
                                        <span 
                                            v-for="role in sortRoles(user.roles).slice(0, 2)" 
                                            :key="role.id"
                                            class="role-tag"
                                            :class="`role-${getRoleType(role.roleName)}`"
                                            :style="{ backgroundColor: getRoleColor(role.roleName) }"
                                        >
                                            {{ role.roleName || '未知角色' }}
                                        </span>
                                        <span 
                                            v-if="sortRoles(user.roles).length > 2"
                                            class="role-tag more-tag"
                                            :style="{ backgroundColor: '#e6f7ff', color: '#1890ff' }"
                                        >
                                            +{{ sortRoles(user.roles).length - 2 }}
                                        </span>
                                    </div>
                                </el-tooltip>
                                <div v-else class="role-tags-wrapper">
                                    <span 
                                        v-for="role in sortRoles(user.roles)" 
                                        :key="role.id"
                                        class="role-tag"
                                        :class="`role-${getRoleType(role.roleName)}`"
                                        :style="{ backgroundColor: getRoleColor(role.roleName) }"
                                    >
                                        {{ role.roleName || '未知角色' }}
                                    </span>
                                </div>
                            </div>
                            <span v-else class="no-role">
                                暂无角色 (用户角色数量: {{ user.roles ? user.roles.length : 0 }})
                                <br>
                                <small style="color: #999;">调试: {{ JSON.stringify(user.roles) }}</small>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="profile-content">
                    <div class="info-section">
                        <h3 class="section-title">
                            <el-icon><User /></el-icon>
                            基本信息
                        </h3>
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">
                                    <el-icon><Message /></el-icon>
                                    邮箱
                                </div>
                                <div class="info-value">{{ user.email || '未设置' }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">
                                    <el-icon><Phone /></el-icon>
                                    电话
                                </div>
                                <div class="info-value">{{ user.phone || '未设置' }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="action-section">
                        <el-button 
                            type="primary" 
                            size="large" 
                            @click="handleEditProfile"
                            class="edit-btn"
                        >
                            <el-icon><Edit /></el-icon>
                            编辑资料
                        </el-button>
                        <el-button 
                            type="info" 
                            size="large" 
                            @click="showAvatarDialog = true"
                            class="avatar-btn"
                        >
                            <el-icon><Camera /></el-icon>
                            更换头像
                        </el-button>
                    </div>
                </div>
            </template>
        </el-card>

        <!-- 编辑资料对话框 -->
        <el-dialog 
            v-model="editDialogVisible" 
            title="编辑资料" 
            width="500px"
            :close-on-click-modal="false"
            class="edit-dialog"
        >
            <el-form 
                ref="editFormRef" 
                :model="editForm" 
                :rules="editRules"
                label-width="80px"
                class="edit-form"
            >
                <el-form-item label="用户名" prop="userName">
                    <el-input 
                        v-model="editForm.userName" 
                        placeholder="请输入用户名"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input 
                        v-model="editForm.email" 
                        placeholder="请输入邮箱"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input 
                        v-model="editForm.phone" 
                        placeholder="请输入电话号码"
                        clearable
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button 
                        type="primary" 
                        @click="handleSaveProfile"
                        :loading="saveLoading"
                    >
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 头像预览对话框 -->
        <el-dialog 
            v-model="showAvatarDialog" 
            title="更换头像" 
            width="400px"
            class="avatar-dialog"
        >
            <div class="avatar-preview-container">
                <div class="avatar-preview">
                    <el-avatar 
                        :size="120" 
                        :src="getAvatarUrl()" 
                        class="avatar-preview-image"
                    />
                </div>
                <el-upload
                    ref="uploadRef"
                    :action="uploadAction"
                    :headers="uploadHeaders"
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleAvatarSuccess"
                    :on-error="handleAvatarError"
                    :show-file-list="false"
                    accept="image/*"
                    class="avatar-upload"
                >
                    <el-button type="primary" class="upload-btn">
                        <el-icon><Upload /></el-icon>
                        选择图片
                    </el-button>
                </el-upload>
                <div class="upload-tips">
                    <p>支持 JPG、PNG、GIF、WebP 格式</p>
                    <p>图片大小不超过 2MB</p>
                    <p>建议尺寸大于 100x100</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
// 定义组件名称
defineOptions({
  name: 'UserProfile'
})

import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Camera, User, Message, Phone, Edit, Upload } from '@element-plus/icons-vue'
import { getUserDetail, getAvatarInfo, getUserRoles } from '@/api/user'
import { baseURL } from '@/utils/request'

// 响应式数据
const user = ref({})
const loading = ref(true)
const avatarRefreshKey = ref(0)
const avatar = ref('')
const showAvatarDialog = ref(false)
const editDialogVisible = ref(false)
const editForm = ref({})
const editFormRef = ref()
const editRules = {
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入电话号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ]
}
const saveLoading = ref(false)

// 获取当前用户ID
const getCurrentUserId = async () => {
    try {
        const tokenData = localStorage.getItem('token')
        if (!tokenData) {
            ElMessage.error('用户未登录')
            return null
        }
        
        const parsedTokenData = JSON.parse(tokenData)
        // 尝试不同的方式获取用户信息
        const userInfo = parsedTokenData.userInfo || parsedTokenData.data?.userInfo || parsedTokenData
        
        if (userInfo && userInfo.avatar) {
            avatar.value = `${baseURL}/users/avatar/${userInfo.avatar}`
        }
        
        if (userInfo && userInfo.userId) {
            const { data } = await getUserDetail(userInfo.userId)
            user.value = data
            
            // 获取用户角色信息
            await loadUserRoles(userInfo.userId)
            
            return userInfo.userId
        } else {
            ElMessage.error('用户信息不完整')
            return null
        }
    } catch {
        ElMessage.error('获取用户信息失败')
        return null
    }
}

// 获取用户头像信息
const loadAvatarInfo = async () => {
  try {
    const tokenData = localStorage.getItem('token')
    if (!tokenData) return
    const parsedTokenData = JSON.parse(tokenData)
    const userInfo = parsedTokenData.userInfo || parsedTokenData.data?.userInfo || parsedTokenData
    if (!userInfo || !userInfo.userId) return
    const response = await getAvatarInfo(userInfo.userId)
    if (response && response.code === 200 && response.data && response.data.avatar) {
      user.value.avatar = `${baseURL}/users/avatar/${response.data.avatar}`
    } else {
      user.value.avatar = ''
    }
  } catch {
    user.value.avatar = ''
  }
}

// 获取用户角色信息
const loadUserRoles = async (userId) => {
  try {
    const response = await getUserRoles(userId)
    if (response && response.data) {
      user.value.roles = response.data
    } else {
      user.value.roles = []
    }
  } catch (error) {
    console.error('获取用户角色失败:', error)
    user.value.roles = []
  }
}

// 头像上传前验证
const beforeAvatarUpload = (file) => {
    
    // 检查文件类型
    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']
    if (!allowedTypes.includes(file.type)) {
        ElMessage.error('只支持 JPG、PNG、GIF、WebP 格式的图片!')
        return false
    }
    
    // 检查文件大小 (2MB)
    const maxSize = 2 * 1024 * 1024 // 2MB
    if (file.size > maxSize) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }
    
    // 检查图片尺寸
    return new Promise((resolve) => {
        const reader = new FileReader()
        reader.onload = (e) => {
            const img = new Image()
            img.onload = () => {
                if (img.width < 100 || img.height < 100) {
                    ElMessage.warning('建议上传尺寸大于 100x100 的图片')
                }
                resolve(true)
            }
            img.onerror = () => {
                ElMessage.error('图片格式不正确')
                resolve(false)
            }
            img.src = e.target.result
        }
        reader.readAsDataURL(file)
    })
}

// 处理头像点击事件
const handleAvatarClick = () => {
    showAvatarDialog.value = true
}

// 获取头像URL
const getAvatarUrl = () => {
    avatarRefreshKey.value // 依赖此值，变化时重新获取
    return getLocalAvatarUrl()
}

// 获取本地头像URL
const getLocalAvatarUrl = () => {
    if (user.value.avatar) {
        return user.value.avatar
    }
    return '/src/assets/images/default-avatar.png'
}

// 处理编辑资料
const handleEditProfile = () => {
    editForm.value = {
        userName: user.value.userName || '',
        email: user.value.email || '',
        phone: user.value.phone || ''
    }
    editDialogVisible.value = true
}

// 处理保存资料
const handleSaveProfile = async () => {
    if (!editFormRef.value) return
    
    await editFormRef.value.validate(async (valid) => {
        if (valid) {
            saveLoading.value = true
            try {
                const tokenData = localStorage.getItem('token')
                if (!tokenData) {
                    ElMessage.error('用户未登录')
                    return
                }
                
                const parsedTokenData = JSON.parse(tokenData)
                const userInfo = parsedTokenData.userInfo || parsedTokenData.data?.userInfo || parsedTokenData
                if (!userInfo || !userInfo.userId) {
                    ElMessage.error('用户信息不完整')
                    return
                }

                // 调用更新用户API
                const response = await updateUserInfo(userInfo.userId, editForm.value)
                if (response && response.code === 200) {
                    ElMessage.success('资料更新成功!')
                    editDialogVisible.value = false
                    
                    // 重新获取用户信息
                    await getCurrentUserId()
                    await loadAvatarInfo()
                    
                    // 重新获取角色信息
                    const tokenData = localStorage.getItem('token')
                    if (tokenData) {
                        const parsedTokenData = JSON.parse(tokenData)
                        const userInfo = parsedTokenData.userInfo || parsedTokenData.data?.userInfo || parsedTokenData
                        if (userInfo && userInfo.userId) {
                            await loadUserRoles(userInfo.userId)
                        }
                    }
                } else {
                    ElMessage.error('资料更新失败: ' + (response?.message || '未知错误'))
                }
            } catch (error) {
                console.error('更新用户资料失败:', error)
                ElMessage.error('资料更新失败')
            } finally {
                saveLoading.value = false
            }
        }
    })
}

// 更新用户信息API
const updateUserInfo = async (userId, userData) => {
    try {
        const tokenData = localStorage.getItem('token')
        if (!tokenData) {
            throw new Error('用户未登录')
        }
        
        const parsedTokenData = JSON.parse(tokenData)
        const token = parsedTokenData.token || parsedTokenData.accessToken
        
        const response = await fetch(`${baseURL}/users/${userId}`, {
            method: 'PUT',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userData)
        })
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`)
        }
        
        const result = await response.json()
        return result
    } catch (error) {
        console.error('更新用户信息失败:', error)
        throw error
    }
}

// 头像上传成功处理
const handleAvatarSuccess = async (response) => {
    if (response.code === 200) {
        ElMessage.success('头像上传成功!')
        avatarRefreshKey.value++
        showAvatarDialog.value = false
        
        // 重新获取用户信息和头像
        await getCurrentUserId()
        await loadAvatarInfo()
        
        // 更新localStorage中的头像信息
        const tokenData = localStorage.getItem('token')
        if (tokenData) {
            try {
                const parsedTokenData = JSON.parse(tokenData)
                const userInfo = parsedTokenData.userInfo || parsedTokenData.data?.userInfo || parsedTokenData
                if (userInfo && userInfo.userId) {
                    // 获取最新的头像信息
                    const avatarInfoRes = await getAvatarInfo(userInfo.userId)
                    if (avatarInfoRes && avatarInfoRes.code === 200 && avatarInfoRes.data && avatarInfoRes.data.avatar) {
                        const avatarFileName = avatarInfoRes.data.avatar
                        
                        // 更新localStorage中的头像信息
                        const updatedUserInfo = { ...userInfo, avatar: avatarFileName }
                        const updatedToken = { ...parsedTokenData, userInfo: updatedUserInfo }
                        localStorage.setItem('token', JSON.stringify(updatedToken))
                        
                        // 更新页面显示的头像路径
                        user.value.avatar = `${baseURL}/users/avatar/${avatarFileName}`
                        
                        // 强制刷新头像显示
                        avatarRefreshKey.value++
                        
                        // 触发全局头像更新事件
                        window.dispatchEvent(new CustomEvent('avatar-updated', {
                            detail: { avatar: avatarFileName }
                        }))
                        
                        // 触发用户信息更新事件
                        window.dispatchEvent(new CustomEvent('user-info-updated', {
                            detail: { userInfo: updatedUserInfo }
                        }))
                        
                        ElMessage.success('头像更新成功!')
                    }
                }
            } catch (error) {
                console.error('更新头像信息失败:', error)
            }
        }
    } else {
        ElMessage.error('头像上传失败: ' + (response.message || '未知错误'))
    }
}

// 头像上传失败处理
const handleAvatarError = (error) => {
    console.error('头像上传失败:', error)
    ElMessage.error('头像上传失败')
}

// 上传相关配置
const uploadAction = computed(() => {
    const tokenData = localStorage.getItem('token')
    if (tokenData) {
        const parsedTokenData = JSON.parse(tokenData)
        const userInfo = parsedTokenData.userInfo || parsedTokenData.data?.userInfo || parsedTokenData
        if (userInfo && userInfo.userId) {
            return `${baseURL}/users/${userInfo.userId}/avatar`
        }
    }
    return `${baseURL}/users/avatar`
})

const uploadHeaders = computed(() => {
    const tokenData = localStorage.getItem('token')
    if (tokenData) {
        const parsedTokenData = JSON.parse(tokenData)
        const token = parsedTokenData.token || parsedTokenData.accessToken
        return {
            'Authorization': `Bearer ${token}`
        }
    }
    return {}
})

// 根据角色名称获取标签类型
const getRoleType = (roleName) => {
    const roleTypeMap = {
        '管理员': 'danger',
        '超级管理员': 'danger',
        '普通用户': 'info',
        '用户': 'info',
        '角色管理员': 'warning',
        '权限管理员': 'warning',
        '系统管理员': 'danger'
    }
    return roleTypeMap[roleName] || 'primary'
}

// 对角色进行排序，管理员角色优先显示
const sortRoles = (roles) => {
    if (!roles || roles.length === 0) return [];
    
    const rolePriority = {
        '超级管理员': 1,
        '管理员': 2,
        '系统管理员': 3,
        '角色管理员': 4,
        '权限管理员': 5,
        '普通用户': 6,
        '用户': 7
    };
    
    return roles.sort((a, b) => {
        const priorityA = rolePriority[a.roleName] || 999;
        const priorityB = rolePriority[b.roleName] || 999;
        return priorityA - priorityB;
    });
}

// 获取角色显示文本
const getRoleDisplay = (roles) => {
    if (!roles || roles.length === 0) return '暂无角色';
    const sortedRoles = sortRoles(roles);
    return sortedRoles.map(role => role.roleName).join('、');
}

// 根据角色名称获取颜色
const getRoleColor = (roleName) => {
    const colorMap = {
        '管理员': '#f56c6c',
        '超级管理员': '#f56c6c',
        '普通用户': '#909399',
        '用户': '#909399',
        '角色管理员': '#e6a23c',
        '权限管理员': '#e6a23c',
        '系统管理员': '#f56c6c'
    }
    return colorMap[roleName] || '#409EFF'
}

// 组件挂载时获取用户信息
onMounted(async () => {
    loading.value = true
    try {
        await getCurrentUserId()
        await loadAvatarInfo()
    } catch (error) {
        console.error('获取用户信息失败:', error)
        ElMessage.error('获取用户信息失败')
    } finally {
        loading.value = false
    }
})
</script>

<style scoped>
/* 添加一些微妙的动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.profile-container {
    min-height: 100vh;
    background: #f5f7fa;
    padding: 0 30px;
    padding-top: 0;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    max-height: 100vh;
    background: #f5f7fa;
}

.profile-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    overflow: hidden;
    z-index: 0;
}

.profile-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent !important;
    z-index: -1;
    background: transparent !important;
}

.profile-card {
    width: 100%;
    max-width: 900px;
    margin: 0;
    margin-top: 20px;
    background: #ffffff !important;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out;
    background: #ffffff !important;
}

.loading-container {
    padding: 40px;
    text-align: center;
    animation: fadeInUp 0.6s ease-out;
}

.profile-header {
    background: transparent !important;
    padding: 3px 20px 3px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    background: transparent !important;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
    padding: 2px;
    background: transparent !important;
    border-radius: 8px;
}

.avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid #f0f0f0;
    background: transparent !important;
    overflow: hidden;
}

.avatar-wrapper:hover {
    border-color: #409EFF;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
}

/* 确保头像有默认背景 */
:deep(.el-avatar) {
    background: transparent !important;
}

:deep(.el-avatar img) {
    background: #ffffff;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: transparent !important;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(64, 158, 255, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: transparent !important;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.camera-icon {
    color: white;
    font-size: 24px;
    background: transparent !important;
}

.avatar-hint {
    margin-top: 3px;
    font-size: 12px;
    color: #606266;
    text-align: center;
    background: transparent !important;
}

.avatar-hint:hover {
    color: #409EFF;
}

.profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent !important;
    padding: 10px;
    border-radius: 8px;
    margin-top: 5px;
}

.profile-username {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
    text-align: center;
    animation: fadeInUp 0.6s ease-out 0.2s both;
    background: transparent !important;
}

.profile-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
    background: transparent !important;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #67c23a !important;
    position: relative;
}

.status-indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #67c23a;
    z-index: -1;
}

.status-indicator.online {
    background-color: #67c23a !important;
    box-shadow: 0 0 8px rgba(103, 194, 58, 0.5);
}

.status-indicator.offline {
    background-color: #f56c6c !important;
    box-shadow: 0 0 8px rgba(245, 108, 108, 0.5);
}

.status-indicator.away {
    background-color: #e6a23c !important;
    box-shadow: 0 0 8px rgba(230, 162, 60, 0.5);
}

.status-text {
    font-size: 12px;
    color: #67c23a;
    font-weight: 500;
    background: transparent !important;
}

.profile-role {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.roles-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px;
}

.role-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.role-tag {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    margin: 3px;
    display: inline-block;
    color: white !important;
    text-align: center;
    min-width: 50px;
    line-height: 1.4;
    cursor: pointer;
    background-color: #409EFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.role-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 确保文字可见 */
.role-tag {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.role-tag.more-tag {
    background-color: #e6f7ff !important;
    color: #1890ff !important;
    border: 1px solid #91d5ff;
    text-shadow: none;
}

.no-role {
    color: #999;
    font-size: 14px;
    font-style: italic;
}

.profile-content {
    padding: 8px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff !important;
}

.info-section {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #f0f0f0;
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    border-bottom: 2px solid #409EFF;
    padding-bottom: 10px;
}

.section-title .el-icon {
    margin-right: 10px;
    font-size: 24px;
    color: #409EFF;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 12px;
    background: #fafafa;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.info-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.05), transparent);
    transition: left 0.5s ease;
}

.info-item:hover::before {
    left: 100%;
}

.info-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #409EFF;
    background: #ffffff;
}

.info-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    min-width: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.info-label .el-icon {
    font-size: 20px;
    color: #409EFF;
}

.info-item:hover .info-label .el-icon {
    transform: scale(1.1);
    color: #337ecc;
}

.info-value {
    font-size: 16px;
    color: #606266;
    font-weight: 500;
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.action-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 10px;
    animation: fadeInUp 0.8s ease-out 0.8s both;
}

.edit-btn, .avatar-btn {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.edit-btn::before, .avatar-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.edit-btn:hover::before, .avatar-btn:hover::before {
    left: 100%;
}

.edit-btn {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    color: white;
}

.edit-btn:hover {
    background: linear-gradient(135deg, #337ecc 0%, #5a9fd8 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
}

.avatar-btn {
    background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
    color: white;
}

.avatar-btn:hover {
    background: linear-gradient(135deg, #5daf34 0%, #7bc95a 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(103, 194, 58, 0.3);
}

/* 对话框样式 */
.avatar-dialog, .edit-dialog {
    border-radius: 16px;
    animation: fadeInUp 0.4s ease-out;
}

.avatar-dialog :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    color: white;
    border-radius: 16px 16px 0 0;
    padding: 20px 24px;
}

.avatar-dialog :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
}

.edit-dialog :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    color: white;
    border-radius: 16px 16px 0 0;
    padding: 20px 24px;
}

.edit-dialog :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
}

.avatar-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}

.avatar-preview {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-preview-image {
    border: 3px solid #f0f0f0;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.avatar-preview-image:hover {
    border-color: #409EFF;
    transform: scale(1.05);
}

.avatar-upload {
    margin-bottom: 15px;
}

.upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
}

.upload-tips {
    text-align: center;
    color: #909399;
    font-size: 12px;
    line-height: 1.5;
}

.upload-tips p {
    margin: 4px 0;
}

.edit-form {
    padding: 20px 0;
}

.edit-form :deep(.el-form-item__label) {
    font-weight: 600;
    color: #2c3e50;
}

.edit-form :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid #e4e7ed;
}

.edit-form :deep(.el-input__wrapper:hover) {
    border-color: #409EFF;
}

.edit-form :deep(.el-input__wrapper.is-focus) {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.dialog-footer .el-button {
    flex: 1;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.dialog-footer .el-button:hover {
    transform: translateY(-2px);
}

.dialog-footer .el-button--primary {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    border: none;
}

.dialog-footer .el-button--primary:hover {
    background: linear-gradient(135deg, #337ecc 0%, #5a9fd8 100%);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .profile-container {
        padding: 0 15px;
        padding-top: 0;
        padding-bottom: 15px;
        max-height: 100vh;
        overflow-y: auto;
        align-items: flex-start;
    }
    
    .profile-card {
        margin: 0;
        margin-top: 15px;
        animation: fadeInUp 0.4s ease-out;
        max-width: 100%;
    }
    
    .profile-header {
        padding: 2px 15px 2px;
    }
    
    .profile-username {
        font-size: 24px;
        animation: fadeInUp 0.6s ease-out 0.2s both;
    }
    
    .profile-content {
        padding: 6px 20px;
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        animation: fadeInUp 0.6s ease-out 0.4s both;
    }
    
    .action-section {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .info-item {
        padding: 12px 10px;
        animation: fadeInUp 0.6s ease-out 0.3s both;
    }
    
    .info-label {
        font-size: 16px;
        min-width: 60px;
    }
    
    .info-value {
        font-size: 16px;
        text-align: left;
        word-break: break-all;
        white-space: normal;
    }
    
    .roles-container {
        max-width: 250px;
        gap: 4px;
    }
    
    .role-tag {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    .edit-btn, .avatar-btn {
        height: 45px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .profile-container {
        padding: 0 10px;
        padding-top: 0;
        padding-bottom: 10px;
        align-items: flex-start;
    }
    
    .profile-header {
        padding: 2px 10px 2px;
    }
    
    .avatar-wrapper {
        width: 60px;
        height: 60px;
        animation: fadeInUp 0.6s ease-out 0.1s both;
    }
    
    .profile-username {
        font-size: 18px;
        animation: fadeInUp 0.6s ease-out 0.2s both;
    }
    
    .profile-content {
        padding: 5px 15px;
    }
    
    .section-title {
        font-size: 18px;
    }
    
    .edit-btn, .avatar-btn {
        height: 45px;
        font-size: 14px;
    }
    
    .profile-card {
        margin: 0;
        margin-top: 10px;
        max-width: 100%;
    }
    
    .info-label {
        font-size: 14px;
        min-width: 50px;
    }
    
    .info-value {
        font-size: 14px;
        text-align: left;
        word-break: break-all;
        white-space: normal;
    }
    
    .roles-container {
        max-width: 200px;
        gap: 3px;
    }
    
    .role-tag {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .info-item {
        padding: 10px 8px;
    }
    
    .info-grid {
        gap: 8px;
    }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
    .profile-container {
        background: #1a1a1a;
    }
    
    .profile-card {
        background: #2d2d2d;
        border-color: #404040;
    }
    
    .profile-header {
        background: #2d2d2d;
        border-bottom-color: #404040;
    }
    
    .profile-username {
        color: #e0e0e0;
    }
    
    .info-section {
        background: #2d2d2d;
        border-color: #404040;
    }
    
    .section-title {
        color: #e0e0e0;
        border-bottom-color: #409EFF;
    }
    
    .info-item {
        background: #363636;
        border-color: #404040;
    }
    
    .info-item:hover {
        background: #404040;
        border-color: #409EFF;
    }
    
    .info-label {
        color: #b0b0b0;
    }
    
    .info-value {
        color: #e0e0e0;
    }
    
    .avatar-hint {
        color: #909399;
    }
    
    .status-text {
        color: #b0b0b0;
    }
    
    .status-indicator.online {
        background-color: #67c23a !important;
        box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
    }
    
    .status-indicator.offline {
        background-color: #f56c6c !important;
        box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
    }
    
    .status-indicator.away {
        background-color: #e6a23c !important;
        box-shadow: 0 0 8px rgba(230, 162, 60, 0.6);
    }
    
    .avatar-preview-container {
        background: #363636;
        border-color: #404040;
    }
    
    /* 暗黑模式滚动条样式 */
    .profile-container::-webkit-scrollbar-track {
        background: #2d2d2d;
    }
    
    .profile-container::-webkit-scrollbar-thumb {
        background: #555;
    }
    
    .profile-container::-webkit-scrollbar-thumb:hover {
        background: #666;
    }
    
    .profile-card::-webkit-scrollbar-track {
        background: #363636;
    }
    
    .profile-card::-webkit-scrollbar-thumb {
        background: #555;
    }
    
    .profile-card::-webkit-scrollbar-thumb:hover {
        background: #666;
    }
    
    .profile-container {
        scrollbar-color: #555 #2d2d2d;
    }
    
    .profile-card {
        scrollbar-color: #555 #363636;
    }
}

/* 自定义滚动条样式 */
.profile-container::-webkit-scrollbar {
    width: 8px;
}

.profile-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.profile-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.profile-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.profile-card::-webkit-scrollbar {
    width: 6px;
}

.profile-card::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
}

.profile-card::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
    transition: background 0.3s ease;
}

.profile-card::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Firefox 滚动条样式 */
.profile-container {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.profile-card {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f8f9fa;
}
</style>